import { AddadviseApi } from '@/api/advise';
import { baseURL } from '@/api/request';
import RichEditor from '@/commpoent/fwb';
import { options } from '@/utils';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import type { ProFormInstance } from '@ant-design/pro-components';
import {
  ProCard,
  ProForm,
  ProFormCheckbox,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-components';
import { Cascader, Form, Upload, message } from 'antd';
import { isObject } from 'lodash';
import { useRef, useState } from 'react';





const AdviseAdd = () => {
  const formRef = useRef<ProFormInstance>();
  const [content,setContent] = useState<any>('')
  const [obj,setObj] = useState<objApi>({content:'',title:'',desc:'',type:[]} )
  const normFile = async(e: any) => {
    let y = await e.file.response
    formRef.current?.setFieldValue('desc',y?.path)
    console.log(formRef.current?.getFieldsValue());
    
    if (Array.isArray(e)) {
        return e;
    }
    return e?.fileList;
};
  return (
    <ProCard>
      <StepsForm<{
        name: string;
      }>
        formRef={formRef}
        onFinish={async () => {
          let res = await AddadviseApi(obj);
          console.log(res);
          
          formRef.current?.resetFields()
          message.success('提交成功');
          return true
        }}
        formProps={{
          validateMessages: {
            required: '此项为必填项',
          },
        }}
      >
        
        <StepsForm.StepForm<{
          name: string;
        }>
          name="base"
          title="第一步"
          stepProps={{
            description: '认真填写意见标题和分类',
          }}
          onFinish={async () => {
            setObj({...obj,...formRef.current?.getFieldsValue()})
            return true;
          }}
        >
          <ProFormText
            name="title"
            label="标题"
            width="md"
            placeholder="请输入"
            rules={[{ required: true }]}
          />

          <Form.Item name="type" label="分类" rules={[{ required: true, message: '请选择类型' }]}>
            <Cascader options={options} />
          </Form.Item>
          <Form.Item label="图片选择" name="desc" getValueFromEvent={normFile} rules={[{ required: true, message: '请选择图片' }]}>
                <Upload action={baseURL +'/pro/uplodafile'} listType="picture-card" maxCount={1}>
                    <div>
                        <PlusOutlined />
                        <div style={{ marginTop: 8 }}>Upload</div>
                    </div>
                </Upload>
            </Form.Item>
        </StepsForm.StepForm>
        <StepsForm.StepForm<{
          checkbox: string;
        }>
          name="content"
          title="第二步"
          stepProps={{
            description: '添加意见内容',
          }}
          onFinish={async () => {
            setObj({...obj,content:content})
            return true;
          }}
        >
                    <RichEditor  getContent={setContent} content={content}  ></RichEditor>
        </StepsForm.StepForm>
        <StepsForm.StepForm
          name="time"
          title="第三步"
          stepProps={{
            description: '请提交宝贵意见',
          }}
        >
        </StepsForm.StepForm>
      </StepsForm>
      
    </ProCard>

  )
}

export default AdviseAdd